<template>
    <div class="wrapper">
        <div class="topSearch">
            <div class="right">
                <van-dropdown-menu active-color="#66d6ff" @change="searchCli">
                    <van-dropdown-item v-model="radio" :options="option1" @change="searchCli" />
                </van-dropdown-menu>
            </div>
            <div class="left">
                <van-search v-model="custNoOrName" @search="searchCli" @clear="clearSearchVal" placeholder="请输入商户名/手机号" />
            </div>
        </div>
        <div class="bottomWrapper">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getFindPageList">
                <div class="list" @click.stop="rateInfo(item, '/checkDetail?')" v-for="(item, index) in merchantList" :key="index">
                    <div class="container">
                        <div class="title">
                            <div style="font-size: 13px; display: flex; align-items: center">
                                {{ item.LEGAL_PERSON }}
                            </div>
                            <div style="display: flex; align-items: center; white-space: nowrap">
                                <div class="select"
                                    v-if="item.STATUS === statusName[0] && item.IS_SELF == 'Y'"
                                    @click.stop="rateInfo(item, '/rateEdit')">
                                    <span style="color: #eb3941;">费率变更</span>
                                    <img src="@/assets/chevron-down@2x.png" mode="widthFix" />
                                </div>
                                <div class="select" v-if="item.STATUS === statusName[0]" style="margin-left: 15px"
                                    @click.stop="rateInfo(item, '/deal')">
                                    <span style="color: #eb3941;">交易查询</span>
                                    <img src="@/assets/chevron-down@2x.png" mode="widthFix" />
                                </div>
                            </div>
                        </div>
                        <div class="content">
                            <img src="@/assets/index/person.png" mode="" />
                            <div class="center">
                                <div class="number" style="margin-top: 12px;">
                                    <img src="@/assets/merchantNumberImg.png" mode="" />
                                    <span>商户编号：{{ item.CUSTOMER_NO }}</span>
                                </div>
                                 <!--<div class="phone">
                                    <img src="/static/merchantPhoneImg.png" mode=""/>
                                    <span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{ item.PHONE_NO }}</span> 
                                </div>-->
                                <div class="state" style="margin-top: 12px;">
                                    <img src="@/assets/merchantStateImg.png" mode="" />
                                    <span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 态：
                                        <span style="color: #07c160" v-if="item.STATUS === statusName[0]">已认证</span>
                                        <span style="color: #eb3941" class="item-last" v-if="item.STATUS === statusName[1]">未认证</span>
                                    </span>
                                </div>
								<div class="dia" style="margin-top: 12px;">
									
									<span style="margin-left: 20px;">月交易金额：{{item.AMOUNT}}</span>
								</div>
								<div class="dia"  style="margin-top: 12px;">
									
									<span style="margin-left: 20px;">总交易金额：{{item.TOTALAMOUNT}}</span>
								</div>
                            </div>
                        </div>
                    </div>
                </div>
                <empty v-if="!merchantList.length"></empty>
            </van-list>
        </div>
    </div>
</template>
<script>
import { findJoinClasses, findPageList, findByPageAll } from '@/api/merchants'
import store from '../../store'

export default defineComponent({
    name: 'merchants',
    setup() {
        const router = useRouter()
        const state = reactive({
            custNoOrName: '',
            loading: false,
            finished: false,
            radio: '',
            userInfo: '',
            merchantList: [],
            option1: [
                { text: '全部', value: '' },
                { text: '已认证', value: 'TRUE' },
                { text: '未认证', value: 'INIT' }
            ],
            statusName: ['TRUE', 'INIT'], //列表状态
            currentPage: 1,
            isOwn: '',
            statusCode: '',
            hasData: true
        })
        state.agencySource = store.state.user.userInfo.agentBean.agencySource
        const getFindJoinClasses = () => {
            findJoinClasses().then(res => {
                const { code, object } = res
                if (code === 200) {
                    state.isOwn = object[0].isOwn
                }
            })
        }
		
        // getFindJoinClasses()
        const clearSearchVal = () => {
            state.custNoOrName = ''
        }
        const rateInfo = (item, url) => {
            router.push({
                path: url,
                query: {
                    CUSTOMER_NO: item.CUSTOMER_NO,
                    agencySource: item.AGENCY_SOURCE,
                    CUSTOMER_NAME: item.CUSTOMER_NAME
                }
            })
        }
        const searchCli = () => {
            console.log(1)
            state.merchantList = []
            state.currentPage = 1
            getFindPageList()
        }
        const getFindPageList = () => {
            findPageList({
                currentPage: state.currentPage,
                status: state.radio,
                phoneNoOrName: state.custNoOrName
            }).then(res => {
                if (res.object.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }
                state.merchantList = state.merchantList.concat(res.object)
            })
        }
        return {
            ...toRefs(state),
            rateInfo,
            getFindPageList,
            searchCli,
            clearSearchVal
        }
    },
	// activated(){
	// 	 const instance = getCurrentInstance();
	// 	console.log('asd',instance.ctx.currentPage)
	// 	if(instance.ctx.currentPage!=1){
	// 		this.getFindPageList()
	// 	}
		
	// }
})
</script>

<style scoped lang="scss">
.wrapper {
    display: flex;
    height: 100vh;
    flex-direction: column;

    .topSearch {
        display: flex;
        align-items: center;
        background-color: #ffffff;

        .left {
            flex: 1;
        }

        .right {
            width: 6em;
        }
    }

    .bottomWrapper {
        flex: 1;
        overflow: scroll;
        padding: 0 10px;
        padding-bottom: 10px;

        .list {
            // height: 137px;
			padding: 14px 14px;
            background: #ffffff;
            border-radius: 7px;
            display: flex;
            margin-top: 11px;

            .line {
                width: 9px;
                height: 137px;
                background: linear-gradient(180deg, #ff4f00 0%, #ffc69f 100%);
                border-radius: 7px 0px 0px 7px;
                font-size: 10px;
                //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #545454;

                &:last-of-type {
                    border-radius: 0px 7px 7px 0px;
                }
            }

            .container {
                width: calc(100% - 18px);
                border-radius: 7px 0px 0px 7px;
                display: flex;
                flex-direction: column;
                padding: 0 19px;

                .title {
                    font-size: 13px;
                    //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #545454;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding-left: 8px;
                    border-bottom: 1px solid #e4e4e4;
                    justify-content: space-between;

                    .select {
                        span {
                            font-size: 13px;
                            font-family: 'Avenir', Helvetica, Arial, sans-serif;
                            font-weight: 400;
                            color: #0776e5;
                        }

                        img {
                            width: 16px;
                            height: 16px;
                            vertical-align: middle;
                        }
                    }
                }

                .content {
                    flex: 3;
                    display: flex;
                    align-items: center;

                    > img {
                        width: 42px;
                        height: 42px;
                    }

                    .center {
                        display: flex;
                        flex-direction: column;
                        font-size: 13px;
                        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #545454;
						margin-left: 8px;
                        .number,
                        .phone,
                        .state {
                            white-space: nowrap;
                            img {
                                width: 10px;
                                height: 10px;
                                vertical-align: middle;
                                margin-right: 10px;
                            }
                        }

                        .phone {
                            margin: 10px 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
.van-dropdown-menu__bar {
    box-shadow: none;
}
</style>
